<template>
  <div class="inventory-management">
    <page>
      <div slot="top">
        <el-form label-width="100px" size="small" :inline="true">
          <el-form-item label="产品ID">
            <el-input class="query-item" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="所属隧道">
            <el-input class="query-item" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="隧道部位">
            <query-select url="123" class="query-item" />
          </el-form-item>
          <el-form-item label="工字钢类型">
            <query-select url="123" class="query-item" />
          </el-form-item>
          <el-form-item label="单元">
            <query-select url="123" class="query-item" />
          </el-form-item>
          <el-form-item class="btn-query">
            <el-button type="primary" @click="getTableData(1)">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="body">
        <el-table :data="tableData" border>
          <el-table-column label="序号" width="50px"></el-table-column>
          <el-table-column label="产品ID" prop="a" align="center"></el-table-column>
          <el-table-column label="所属隧道" prop="a" align="center"></el-table-column>
          <el-table-column label="工字钢类型" prop="a" align="center"></el-table-column>
          <el-table-column label="单元" prop="a" align="center"></el-table-column>
          <el-table-column label="已生产" prop="a" align="center"></el-table-column>
          <el-table-column label="剩余库存" prop="a" align="center"></el-table-column>
          <el-table-column label="操作" width="200px" align="center">
            <template>
              <el-link type="primary" :underline="false">入库记录</el-link>
              <el-link type="primary" :underline="false">出库记录</el-link>
              <el-link type="primary" :underline="false">出库</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer">
        <el-pagination
          background
          :page-size="pageVO.pageSize"
          :current-page.sync="pageVO.pageNum"
          :total="pageVO.total"
          :layout="pageOptions.layout"
          :page-sizes="pageOptions.pageSizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </page>
  </div>
</template>

<script>
import pageQuery from '../mixins/pageQuery';
import { getInventoryList } from '@/api/inventory';
export default {
  mixins: [pageQuery],
  data() {
    return {
      queryForm: {},
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    getTableData(pageNum) {
      if (pageNum) {
        this.pageVO.pageNum = pageNum;
      }
      getInventoryList(this.queryForm).then(res => {});
      console.log('query table');
    },
  },
};
</script>

<style lang="scss" scoped>
.inventory-management {
  .btn-query {
    margin-left: 30px;
  }
}
</style>
